<template>
	<div class="Animation">
		<div v-if="loading" class="load animate__animated animate__fadeIn">
			<img :src="requireImg('loading/loading-small.gif')" alt="" />
			<span> loading... </span>
		</div>

		<div v-else class="container animate__animated animate__fadeInTop">
			<div
				class="list"
				v-for="(item, index) in AnimationList"
				:key="index"
				:class="{ active: loopIndex - 1 == index }"
				@click="playAnimation(item, index)"
			>
				<div class="imgbase">
					<img :src="'data:image/png;base64,' + item.image" alt="" />
				</div>
				<div class="title">
					<span>
						{{ item.name }}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { useToolsStore } from '@/stores/tools'
	import { getAnimationList } from '@/utils/getInoByVedio'
	import { requireImg } from '@/utils/common.ts'
	import { loopAnimationList, loopIndex, isLoop } from './index'
	import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
	import { useAirCityStore } from '@/stores/aircity'

	const AirCityStore = useAirCityStore()
	const toolsStore = useToolsStore()

	// 播放导览
	const playAnimation = (val: any, index: number) => {
		//参数：导览序号
		__g.camera.playAnimation(val.id)
		isLoop.value = false
		loopIndex.value = index + 1
	}
	const AnimationList = computed(() => AirCityStore.animationList)

	const loading = computed(() => AnimationList.value.length == 0)
	// watch(
	// 	AnimationList,
	// 	(AnimationList) => {
	// 		if (AnimationList?.length) {
	// 			console.log('播放', loopIndex.value)

	// 			loopAnimationList(AnimationList)
	// 		}
	// 	},
	// 	{ immediate: true },
	// )
	onMounted(() => {
		loopIndex.value = 0
		getAnimationList()
	})

	onUnmounted(() => {
		__g.camera.stopAnimation()
		loopIndex.value = -1
	})
</script>
<style lang="scss" scoped>
	.active {
		border: 2px solid rgb(56, 202, 49);
		color: #fff !important;
	}
	.Animation {
		position: fixed;
		width: 270px;
		height: 1200px;
		top: 700px;
		right: 100px;
		margin: auto;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 9999;
		.list {
			box-sizing: border-box;
			flex-shrink: 0;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 260px;
			height: 260px;
			border-radius: 10px;
			margin: 0 10px 20px 10px;
			overflow: hidden;
			cursor: pointer;
			position: relative;
			color: rgba(255, 255, 255, 0.7);
			&:hover img {
				transform: scale(1.2);
			}

			.imgbase {
				width: 260px;
				height: 260px;
				img {
					transition: all 0.5s;
					width: 100%;
				}
			}

			.title {
				text-align: center;
				position: absolute;
				width: 100px;
				bottom: 10px;
				font-size: 35px;
				width: 100%;
			}
		}
		.load {
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100px;
			height: 100px;
			border-radius: 10px;
			margin: 5px -10px 15px 10px;
			border: 1px solid #fff;
			background: rgba(0, 0, 0, 0.2);
			z-index: 110;

			img {
				transition: all 0.5s;
				width: 260px;
				height: 260px;
			}
			span {
				margin-top: 10px;
			}
		}
	}
</style>
